<template>
    <el-card class="box-card">
        <el-table :data="queryList" style="width: 100%" table-layout="fixed" empty-text="无">
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="realName" label="名字" />
            <el-table-column prop="gmtCreate" label="创建时间" />
            <el-table-column align="center">
                <template #header>
                    <el-select v-model="statusValue" placeholder="Select" @change="changeQueryList">
                        <el-option label="用户" :value="1" />
                        <el-option label="专家" :value="2" />
                        <el-option label="管理员" :value="3" />
                    </el-select>
                </template>
                <template #default="scope">
                    <el-tooltip placement="bottom" v-if="statusValue == 1">
                        <template #content>添加管理员</template>
                        <el-button plain type="primary" :icon="Edit" circle size="small" @click="addOpen(scope.row)" />
                    </el-tooltip>
                    <el-tooltip placement="bottom" v-else-if="statusValue == 3">
                        <template #content>删除管理员</template>
                        <el-button plain type="danger" :icon="Delete" circle size="small"
                            @click="deleteOpen(scope.row)" />
                    </el-tooltip>
                    <div v-else>-</div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :page-size="6" :total="totalPage"
            @current-change="handleCurrentChange" :current-page="currentPage" class="pagination" />
    </el-card>
</template>
<script setup lang="ts">
import { reactive, ref, Ref } from 'vue';
import { apiGetUser, apiGetExpert, apiGetManager, apiAddManager, apiDeleteManager } from '@/apis/management';
import { ElMessageBox } from 'element-plus'
import { Edit, Delete } from '@element-plus/icons-vue'
interface userModel {
    id: string,
    phone: string,
    realName: string,
    status: number,
    username: string
}
let statusValue = ref(1);
let queryList = reactive<Array<userModel>>([])
let currentPage: Ref<number> = ref(1);
let totalPage: Ref<number> = ref(1);
const handleCurrentChange = (page: number) => {
    currentPage.value = page;
    if (statusValue.value == 1) {
        getUer(currentPage.value);
    } else if (statusValue.value == 2) {
        getExpert(currentPage.value)
    } else if (statusValue.value == 3) {
        getManager(currentPage.value)
    }
}

const changeQueryList = (val: number) => {
    statusValue.value = val;
    currentPage.value = 1;
    if (statusValue.value == 1) {
        getUer(currentPage.value);
    } else if (statusValue.value == 2) {
        getExpert(currentPage.value)
    } else if (statusValue.value == 3) {
        getManager(currentPage.value)
    }
}

const getUer = async (currentPage: number) => {
    let res = await apiGetUser(currentPage);
    queryList.length = 0;
    totalPage.value = res.data.data.total;
    queryList.push(...res.data.data.rows);
    console.log(res)
    console.log(totalPage.value)
}

const getExpert = async (currentPage: number) => {
    let res = await apiGetExpert(currentPage);
    totalPage.value = res.data.data.total;
    queryList.length = 0;
    queryList.push(...res.data.data.rows);
    console.log(res)
}

const getManager = async (currentPage: number) => {
    let res = await apiGetManager(currentPage);
    totalPage.value = res.data.data.total;
    queryList.length = 0;
    queryList.push(...res.data.data.rows);
    console.log(res)
}
getUer(1);


const addOpen = async (row: any) => {
    ElMessageBox.confirm(
        '确定将该用户添加为管理员？',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            // type: 'warning',
        }
    ).then(() => {
        addManager(row);
    }).catch(() => { })
}
const addManager = async (row: any) => {
    let data = {
        email: row.email,
        password: row.password,
        phone: row.phone,
        realName: row.realName,
        username: row.username
    }
    let res = await apiAddManager(3, data);
    console.log(data, res)
}

const deleteOpen = async (row: any) => {
    ElMessageBox.confirm(
        '确定撤销该管理员?',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            // type: 'warning',
        }
    ).then(() => {
        deleteManager(row);
    }).catch(() => { })
}
const deleteManager = async (row: any) => {
    let res = await apiDeleteManager(row.id);
    console.log(res);
}
</script>
<style scoped lang="scss">
.box-card {
    margin-top: 20px;
}

.pagination {
    margin-left: 10px;
    margin-top: 20px;
}
</style>